<template>
  <el-dialog append-to-body :close-on-click-modal="false" title="查看轨迹" width="1150px" :visible.sync="visible">
    <baidu-map class="bm-view" :center="center" :zoom="16" :scroll-wheel-zoom="true">
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT" />
      <bm-polyline :path="path" stroke-color="blue" :stroke-opacity="0.7" :stroke-weight="6" />
      <bml-lushu :path="path" :icon="icon" :play="play" auto-view />
      <bm-marker
        v-if="markerStart"
        :position="markerStart"
        :icon="{url: icon_map_start, size: {width: 32, height: 32}}"
      />
      <bm-marker
        v-if="markerEnd"
        :position="markerEnd"
        :icon="{url: icon_map_end, size: {width: 32, height: 32}}"
      />
    </baidu-map>
  </el-dialog>
</template>

<script>
import { BmlLushu } from 'vue-baidu-map'

import icon_map_start from '@/assets/work_watch/map_start.png'
import icon_map_end from '@/assets/work_watch/map_end.png'

const icon = {
  url: 'http://api.map.baidu.com/library/LuShu/1.2/examples/car.png',
  size: { width: 52, height: 26 },
  opts: { anchor: { width: 27, height: 13 }}
}

export default {
  name: 'TaskWatchLine',
  components: { BmlLushu },
  props: {
    path: {
      type: Array,
      default: () => []
    },
    type: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      icon_map_start,
      icon_map_end,
      markerStart: false,
      markerEnd: false,
      center: {},
      play: false,
      icon,
      visible: false
    }
  },
  watch: {
    path: {
      handler: function(val) {
        if (val) {
          this.$data.center = val[0]
          this.$data.markerStart = val[0]
          this.$data.markerEnd = val[val.length - 1]
        }
      },
      immediate: true
    }
  },
  methods: {
    open() {
      this.$data.visible = true
      // this.$data.play = !this.$data.play
    },
    handleStart() {
      this.play = true
    }
  }
}
</script>

<style>
    .bm-view{
      width: 100%;
      height: 600px;
    }
</style>
